import { Add24Regular } from "@vicons/fluent";
import { NButton, NIcon } from "naive-ui";
import {
  currentNodeId,
  showAddMenu,
  setCurrentNodeId,
} from "@/hooks/useWflow";
import { DesignNode } from "@/types/index";
import { PropType } from "vue";
import './style.css'

interface Props {
  nodeItem: DesignNode;
  type: boolean;
}
export default defineComponent({
  name: "AddFlowNodeBtn",
  props: {
    nodeItem: {
      type: Object as PropType<Props["nodeItem"]>,
    },
    isArrow: {
      type: Boolean as PropType<Props["type"]>,
      default: true,
    },
  },
  setup(props) {
    let { nodeItem, isArrow } = props;
    const handleAddNode = (e: MouseEvent, id: string) => {
      showAddMenu(e.clientX, e.clientY, true);
      setCurrentNodeId(id);
    };
    return () => (
      <div class="flow-node-option flex flex-col relative">
        <div class="bg-line absolute left-0 right-0 top-0 bottom-0 m-auto"></div>
        {isArrow ? (
          <div class="arrow absolute right-0 bottom-0 top-0 m-auto"></div>
        ) : (
          <div class="arrow no-arrow absolute right-0 bottom-0 m-auto"></div>
        )}
        <NButton
          onClick={(e) => {
            handleAddNode(e, nodeItem?.id as string);
          }}
          class={`add-node-btn left-0 right-0 bottom-0 top-0 margin-auto ${
            currentNodeId.value == nodeItem?.id ? "active" : ""
          }`}
          color="#16A34A"
          circle
        >
          {{
            icon: () => <NIcon color="#fff" component={Add24Regular} />,
          }}
        </NButton>
      </div>
    );
  },
});
